<template>
  <div>
    <div class="topComonentStyle" :style="{width: viewportWidth - 1440 + 'px', left: 740 + 'px'}">
      <div class="globalBtn">
        <!-- 顶部导航左侧 全局态势监测子菜单；路段态势监测、路口态势监测返回按钮。-->
        <div class="flex1">
          <div class="flex-start" v-if="layer1In">
            <div class="level2Btn" v-for="item in btnList.list" :key="item.type" :style="{ backgroundImage: 'url(' + item.url + ')' }" @click="changeBtnType(item.type)"></div>
          </div>
          <div v-if="showAlertBack" class="alertBack" @click="alertBack"></div>
        </div>
        <!-- 顶部导航中间菜单 全局态势监测、路段态势监测、路口态势监测 -->
        <div class="globalItemContainer flex-start flex1">
          <div class="globalItem" :class="[btnList.globalIndex === item.index ? 'globalActive' : 'globalDefault']" v-for="item in btnList.globalBtnList" :key="item.index" @click="checkModel(item)">{{ item.name }}</div>
        </div>
        <!-- 顶部导航右侧菜单 -->
        <!-- 全局态势监测： -- -->
        <!-- 路段态势监测：车牌搜索框，下拉框，第一视角/第三视角按钮、三急热力按钮 -->
         <!-- 路口态势监测：速度云图按钮，路口搜索框，下拉框，视频窗口 -->
        <data class="flex1 flexEnd">
          <div class="flex-start" v-if="layer2In">
            <!-- 显示搜索车牌布局 -->
            <div v-if="linkSearchShow" class="In2InputSearch">
              <div class="In2InputContainer flex-start">
                <input class="In2Input" v-model="vehicleNum" @input="inputNum" type="text" placeholder="车牌号搜索">
                <div class="In2Close" @click="clearVehicleNum">
                  <div class="In2CloseIcon" v-if="showClearVehicleNum"></div>
                </div>
                <div class="In2Search" @click="handleCllick(2)">
                  <div class="sousuo0"></div>
                </div>
              </div>
              <!-- 模糊查询，最多显示5条搜索内容 -->
              <div class="In2SearchContainer" v-if="showIn2SearchContainer">
                <div class="In2SearchItem" v-for="item in data.vehicleNumData" :key="item.num" @click="changeVehicleNumItem(item.num)">{{ item.num }}</div>
              </div>
            </div>
            <!-- 显示车辆视角布局 -->
            <div class="flex-start" v-if="showType === 1">
              <div class="diyi"></div>
              <div class="disan"></div>
            </div>
            <!-- 显示三急一通按钮布局 -->
            <div class="flex-start" v-if="showType === 2">
              <div class="sjItem" :class="[btnList.sjTypw === item.type ? 'sj_sel' : 'sj_nor']" v-for="item in btnList.sjBtnList" :key="item.type">{{ item.name }}</div>
            </div>
          </div>
          <div class="flex-start" v-if="layerType === 'roadModel'">
            <div class="clickSDYT">速度云图</div>
            <div class="In2InputSearch">
              <el-select v-model="searchValue" filterable placeholder="搜索路口" class="In2InputContainer" @change="getSearchValue">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                ></el-option>
              </el-select>
              <!-- <div class="In2InputContainer flex-start">
                <input class="In2Input" v-model="searchValue" @input="fuzzyQuery" placeholder="搜索路口">
                <div class="In2Close" @click="clearVehicleNum">
                  <div v-if="searchValue === ''" class="sousuo" @click="searchRoad"></div>
                  <div v-if="searchValue !== ''" class="In2CloseIcon" @click="clearSearchValue"></div>
                </div>
                <div class="In2Search" @click="searchRoad">
                  <div class="sousuo0"></div>
                </div>
              </div> -->
              <!-- 模糊查询，最多显示5条搜索内容 -->
              <!-- <div class="In2SearchContainer" v-if="showSearchRoadValue">
                <div class="In2SearchItem" v-for="item in searchRoadValue" :key="item.name" @click="getSearchValue(item.name)">{{ item.name }}</div>
              </div> -->
              <!-- 视频窗口 -->
              <!-- <div class="videoWindow">
                
              </div> -->
            </div>
          </div>
        </data>
      </div>
    </div>
    <CommonPanel name="left" :width="750 + 'px'">
      <div v-if="layerType === 'roadModel'" class="betweenBackg">
        <component-one></component-one>
        <component-two></component-two>
        <component-three></component-three>
        <component-four></component-four>
      </div>
      <div v-if="layerType === 'linkModel'" class="betweenBackg">
        <link-one></link-one>
        <link-two></link-two>
      </div>
      <div v-if="layerType === 'globalModel'" class="betweenBackg">
        <main-one></main-one>
        <main-two></main-two>
      </div>
    </CommonPanel>
    <CommonPanel name="right" :width="750 + 'px'">
      <div v-if="layerType === 'roadModel'" class="betweenBackg">
        <component-right-one></component-right-one>
        <component-right-two></component-right-two>
        <component-right-three></component-right-three>
      </div>
      <div v-if="layerType === 'linkModel'" class="betweenBackg">
        <link-three></link-three>
        <link-four></link-four>
      </div>
      <div v-if="layerType === 'globalModel'" class="betweenBackg">
        <main-three></main-three>
        <main-four></main-four>
      </div>
    </CommonPanel>
     <!-- 全域 -->
    <GlobalLayer v-if="layerType === 'globalModel'"/>
    <!-- 路段 -->
    <LinkLayer v-if="layerType === 'linkModel'"/>
     <!-- 路口 -->
    <RoadLayer v-if="layerType === 'roadModel'"/>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, inject, onMounted, onBeforeUnmount } from 'vue';
import { useUserStore } from '@/store/user';
// import { getStaticFile } from '@sutpc/axios';
import { searchRoadApi } from '@/utils/api';
import { useEmitt } from '@sutpc/vue3-hooks';
// import { getFileByStatic} from '@/utils/index';
import ComponentOne from './components/componentOne.vue';
import ComponentTwo from './components/componentTwo.vue';
import ComponentThree from './components/componentThree.vue';
import ComponentFour from './components/componentFour.vue';
import ComponentRightOne from './components/componentRightOne.vue';
import ComponentRightTwo from './components/componentRightTwo.vue';
import ComponentRightThree from './components/componentRightThree.vue';
import MainOne from './components/mainComponent/mainOne.vue';
import MainTwo from './components/mainComponent/mainTwo.vue';
import MainThree from './components/mainComponent/mainThree.vue';
import MainFour from './components/mainComponent/mainFour.vue';
import linkOne from './components/linkComponent/linkOne.vue';
import linkTwo from './components/linkComponent/linkTwo.vue';
import linkThree from './components/linkComponent/linkThree.vue';
import linkFour from './components/linkComponent/linkFour.vue';
import { dataList } from './data/moveTo'
// import AcLayer from './components/ac-layer/index.vue';
import GlobalLayer from './components/layers/globalLayer.vue'
import LinkLayer from './components/layers/linkLayer.vue'
import RoadLayer from './components/layers/roadLayer.vue'

const main = inject<any>('main');
const { components, awaitMapLoaded }: any = main;
const CommonPanel = components.CommonPanel;
const { emitter } = useEmitt();
// const searchValue = ref('')
// const showSearchRoadValue = ref(false)
const searchRoadValue = ref([])
const userStore = useUserStore()
// 基础数据
const data = reactive({
  vehicleNumData: [{
    num: '津A 111111'
  }, {
    num: '津A 222222'
  }, {
    num: '津A 333333'
  }, {
    num: '津A 444444'
  }, {
    num: '津A 555555'
  }]
})

const btnList = reactive({
  globalBtnList: [{
    name: '全局态势监测',
    type: 'globalModel',
    index: 0
  }, {
    name: '路段态势监测',
    type: 'linkModel',
    index: 1
  }, {
    name: '路口态势监测',
    type: 'roadModel',
    index: 2
  }],
  globalIndex: 0,
  list: [{
    type: 1,
    url: '[publicPath]static/images/sel_lukuang.png',
  }, {
    type: 2,
    url: '[publicPath]static/images/sel_liuliang.png',
  }, {
    type: 3,
    url: '[publicPath]static/images/sel_shijian.png',
  }],
  sjBtnList: [{
    name: '三急',
    type: 1
  }, {
    name: '超速',
    type: 2
  }, {
    name: '压线',
    type: 3
  }],
  sjTypw: 1
})
// 点击第二层按钮，选择当前类型
const sel_type_1 = '[publicPath]static/images/sel_lukuang.png'
const sel_type_2 = '[publicPath]static/images/sel_liuliang.png'
const sel_type_3 = '[publicPath]static/images/sel_shijian.png'
const nor_type_1 = '[publicPath]static/images/nor_lukuang.png'
const nor_type_2 = '[publicPath]static/images/nor_liuliang.png'
const nor_type_3 = '[publicPath]static/images/nor_shijian.png'
const globalType = computed(() => {
  return userStore.$state.globalType
})
const changeBtnType = (type) => {
  userStore.setGlobalType(type)
  // btnList.btnType = type
  if (globalType.value === 1) {
    btnList.list[0].url = sel_type_1
    btnList.list[1].url = nor_type_2
    btnList.list[2].url = nor_type_3
  }
  if (globalType.value === 2) {
    btnList.list[0].url = nor_type_1
    btnList.list[1].url = sel_type_2
    btnList.list[2].url = nor_type_3
  }
  if (globalType.value === 3) {
    btnList.list[0].url = nor_type_1
    btnList.list[1].url = nor_type_2
    btnList.list[2].url = sel_type_3
  }
}

// 获取全局type
const layerType = computed(() => {
  return userStore.getLayerType
})

// 切换全局菜单按钮
const checkModel = (params) => {
  btnList.globalIndex = params.index
  userStore.setLayerType(params.type)
  alertBack()
  // 切换到全局态势
  if (params.type === 'globalModel') {
    userStore.setShowLayer1In(true)
    userStore.setShowLayer2In(false)
    userStore.setShowLayer3In(false)
  }
  // 如果点击的事全域态势，那么返回到
  if (params.type === 'globalModel' && layer1In.value) {
    userStore.setShowLayer1In(false)
  }
  // 切换到路段态势
  if (params.type === 'linkModel') {
    userStore.setShowLayer1In(false)
    userStore.setShowLayer2In(true)
    userStore.setShowLayer3In(false)
  }
  // 切换到路口态势
  if (params.type === 'roadModel') {
    userStore.setShowLayer1In(false)
    userStore.setShowLayer2In(false)
    userStore.setShowLayer3In(true)
    getRoadOptions()
  }
}

// 路段态势监测=====》 搜索车牌
const linkSearchShow = computed(() => {
  return userStore.getLinkSearchShow
})

// 定义搜索车牌
const vehicleNum = ref('')
// 车牌输入框
const inputNum = () => {
  if (vehicleNum.value) {
    showClearVehicleNum.value = true
    showIn2SearchContainer.value = true
    userStore.setVehicleNum(vehicleNum.value)
  } else {
    showClearVehicleNum.value = false
    showIn2SearchContainer.value = false
    userStore.setVehicleNum('')
  }
}
// 选中模糊查询车牌
const changeVehicleNumItem = (item) => {
  vehicleNum.value = item
  userStore.setVehicleNum(item)
}

// 点击搜索车牌
const handleSearch = (type) => {
  userStore.setVehicleNum(vehicleNum.value)
  showIn2SearchContainer.value = false
  userStore.setShowLayer2In(false)
}

// 是否显示删除车牌按钮
const showClearVehicleNum = ref(false)

// 是否显示车牌模糊查询
const showIn2SearchContainer = ref(false)

// 清空路口input值
const clearVehicleNum = () => {
  vehicleNum.value = ''
  userStore.setVehicleNum('')
  showClearVehicleNum.value = false
  showIn2SearchContainer.value = false
}

const showSearchRoadValue = computed(() => {
  return userStore.getShowSerchRoadValue
})
// 定义导航栏各个态势下的状态 0关闭所有，1车辆视角 ，2热力图，3路口摄像机 ，4路口车辆实时事件
const showType = ref(0)
// 控制返回按钮返回
const showAlertBack = ref(false)
const showVehicleView = ref(false)
// 关闭总弹窗
const alertBack = () => {
  showType.value = 0
  showAlertBack.value = false
  // 如果在路段页面，返回后显示车牌号搜索框
  if (userStore.$state.layerType === 'linkModel') {
    userStore.setLinkSearchShow(true)
  }
  // 如果在路口页面，返回后显示路口搜索框
  if (userStore.$state.layerType === 'roadModel') {

  }
}
// 交互后，显示对应交互的操作按钮
const handleCllick = (type) => {
  // type: 0关闭所有，1车辆视角 ，2热力图，3路口摄像机 ，4路口车辆实时事件
  showAlertBack.value = true
  showType.value = type
  if (type === 1) {
    showVehicleView.value = true
    userStore.setLinkSearchShow(true)
  }
  if (type === 2) {
    userStore.setLinkSearchShow(false)
  }
}

defineOptions({ name: 'top-component' });
// 调用pinia显示顶部设备模块
const showMenu = computed(() => {
  return userStore.getShowMenu
})
// 路口设备菜单
const equList = computed(() => {
  // console.log(userStore.getEquList)
  return userStore.getEquList
})

const layer1In = computed(() => {
  return userStore.getShowLayer1In
})

const layer2In = computed(() => {
  return userStore.getShowLayer2In
})

// **************************************  路口态势逻辑  **************************

const layer3In = computed(() => {
  return userStore.getShowLayer3In
})

<<<<<<< HEAD
// 模糊查询路口
const fuzzyQuery = () => {
  if (searchValue.value === '') {
    userStore.setShowSearchRoadValue(false)
    searchRoadValue.value = []
  } else {
    searchRoadApi(searchValue.value).then(res => {
      if (res.length !== 0) {
        userStore.setShowSearchRoadValue(true)
        searchRoadValue.value = res
        getSearchValue(res[0].name)
      } else {
        userStore.setShowSearchRoadValue(false)
        searchRoadValue.value = []
      }
    })
  }
}

const clearSearchValue = () => {
  userStore.setSearchValue('')
=======
const getRoadOptions = () => {
  searchRoadApi('').then(res => {
    options.value = res
    userStore.setSearchValueId(res[0].code)
    // console.log(res)
    // if (res.length === 1){
    //   // console.log(Number(res[0].lng), Number(res[0].lat))
    //   // console.log(Number(res[0].lat));
    //   mapInstance.value.acApi.coord.gcs2pcs([Number(res[0].lng), Number(res[0].lat)], 1, (e) => {
    //     // console.log(e)
    //     mapInstance.value.acApi.camera.set(e.coordinates[0][0], e.coordinates[0][1], 174.407129, -83.974602, -114.262474, () => {
    //       // userStore.isShowMenu(true)
    //       // clearPerception()
    //       // roadDelPolyline()
    //       // userStore.setShowVideo(false)
    //       // equAdd(res[0].id)
    //       topicVehicle()
    //     })
    //   })
    // }
  })
>>>>>>> 08854484accef393e73b30e9037e5da8ad3d876f
}

const options = ref()
// 获取搜索路口值
const searchValue = ref('')
// 选择searchValue后，保存到input
const getSearchValue = (nameValue) => {
//   userStore.setSearchValue(nameValue)
//   userStore.setShowLayer1In(false)
//   const roadIndex = searchRoadValue.value.findIndex(item => {
//     return item.name === nameValue
//   })
  userStore.setSearchValueId(searchValue.value)
//   userStore.setShowSearchRoadValue(false)
//   userStore.setSowLevel3(true)
  emitter.emit('SEARCH_ROAD', { searchValue: searchValue.value })
}

// 顶部导航栏宽度
const viewportWidth = computed(() => {
  console.log(window.innerWidth)
  return window.innerWidth
});
onMounted(async() => {
  await awaitMapLoaded();
  userStore.setLayerType('globalModel')
  // showLayer.value = true
})

onBeforeUnmount(() => {
  userStore.setSearchValue('')
  userStore.setShowSearchRoadValue(false)
  searchRoadValue.value = []
})

</script>

<style lang="less" scoped>
.betweenBackg{
  background: #081834;
  padding: 50px;
  width: 100%;
}
.index-wrap {
  position: absolute;
  left: 100px;
  top: 100px;
  font-size: 20px;

  .s-svg-icon {
    cursor: pointer;
  }

  * {
    pointer-events: all;
  }
}
.biz-common-panel.left{
  padding: 135px 0 40px 28px;
  box-sizing: border-box
}
.biz-common-panel.right{
  padding: 135px 28px 40px 0;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}
.flex-between{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-start{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flex-alignstart{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.marginB10{
  margin-bottom: 10px;
}
.active{
  color: #345D9B;
  cursor: pointer;
}
.default{
  color: #ffffff;
  cursor: pointer;
}
.equBgStyle{
  width: 58px;
  height: 78px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 12px;
  cursor: pointer;
}
.flex1{
  flex: 1;
}
.flexEnd{
  display: flex;
  justify-content: flex-end;
}
.topComonentStyle{
  position: absolute;
  z-index: 9999;
  margin: 136px auto;
  display: flex;
  .In2InputSearch{
    position: relative;
    .In2SearchContainer{
      position: absolute;
      width: 504px;
      top: 58px;
      background-color: rgba(0, 40, 66, 0.75);
      .In2SearchItem{
        color: #2E94FF;
        font-size: 24px;
        padding: 10px 34px;
        box-sizing: border-box
      }
    }
  }
  .In2InputContainer{
    width: 504px;
    height: 58px;
    background: rgba(0,40,66,0.75);
    border: 1px solid #005485;
    margin-right: 32px;
    .el-input__inner{
      height: 58px;
      font-size: 24px;
      background-color: transparent;
      border: none;
      outline: none;
    }
  }
  .In2Input{
    font-size: 24px;
    width: 356px;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 16px 24px;
    font-size: 24px;
    color: #ffffff;
  }
  .In2Close{
    width: 50px;
    cursor: pointer;
    .In2CloseIcon{
      width: 16px;
      height: 16px;
      padding: 22px;
      box-sizing: border-box;
      background-image: url('@{publicPath}static/images/inputClose.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
  .In2Search{
    width: 96px;
    height: 58px;
    background-color:#007DFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .sousuo0{
      width: 28px;
      height: 28px;
      background-image: url('@{publicPath}static/images/sousuo0.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
  .diyi{
    width: 60px;
    height: 60px;
    background-image: url('@{publicPath}static/images/diyi.png');
    background-repeat: no-repeat;
    background-size: 100%;
    margin-right: 22px;
    cursor: pointer;
  }
  .disan{
    width: 60px;
    height: 60px;
    background-image: url('@{publicPath}static/images/disan.png');
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
  }
  .sjItem{
    width: 156px;
    height: 52px;
    font-size: 26px;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    margin-right: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sj_sel{
    background-image: url('@{publicPath}static/images/sj_sel.png');
  }
  .sj_nor{
    background-image: url('@{publicPath}static/images/sj_nor.png');
  }
  .clickSDYT{
    width: 158px;
    height: 56px;
    background-color: rgba(22, 55, 102, 0.60);
    font-size: 36px;
    color: #BBE1FF;
    text-align: center;
    cursor: pointer;
    margin-right: 34px;
  }
  .globalBtn{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    .alertBack{
      width: 60px;
      height: 60px;
      background-image: url('@{publicPath}static/images/alertBack.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .videoWindow{
      position: absolute;
      right: 30px;
      top: 80px;
      width: 760px;
      height: 595px;
      background-color: #ffffff;
    }
    .globalItemContainer{
      height: 74px;
    }
    .globalItem{
      width: 270px;
      height: 58px;
      font-size: 30px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      margin-right: 24px;
    }
    .globalDefault{
      background-image: url('@{publicPath}static/images/globalDefault.png');
      color: #BBE1FF;
    }
    .globalActive{
      background-image: url('@{publicPath}static/images/globalActive.png');
      color: #FFFFFF;
    }
  }
  .icon_biaoti{
    width: 26px;
    height: 24px;
    background-image: url('@{publicPath}static/images/icon_biaoti.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 8px;
  }
  .biaotiText{
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    margin-right: 8px;
  }
  .icon_yiwen{
    width: 18px;
    height: 18px;
    background-image: url('@{publicPath}static/images/icon_yiwen.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
  }
  .icon_fanhui_2{
    width: 60px;
    height: 60px;
    background-image: url('@{publicPath}static/images/fanhui.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    margin-left: 30px;
    margin-right: 24px;
  }
  .level2Btn{
    width: 195px;
    height: 74px;
    margin-right: 40px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .icon_fanhui{
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
  }
  .inputSearchContainer{
    position: relative;
    .inputContainer{
      width: 500px;
      height: 60px;
      background: rgba(22,55,102,0.6);
      border: 1px solid #345D9B;
      border-radius: 2px;
      margin-right: 10px;
      padding: 2px 10px;
      box-sizing: border-box;
      position: relative;
      input {
        width: 440px;
        font-size: 24px;
        background-color: transparent;
        border: none;
        outline: none;
        padding: 16px 24px;
        box-sizing: border-box;
      }
      .sousuo{
        width: 28px;
        height: 28px;
        background-image: url('@{publicPath}static/images/icon_down.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      .clear{
        width: 28px;
        height: 28px;
        background-image: url('@{publicPath}static/images/icon_clear.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
    .serchContainer{
      width: 500px;
      padding: 2px 20px;
      box-sizing: border-box;
      position: absolute;
      top: 70px;
      font-size: 24px;
      color: #2E94FF;
      background: rgba(22,55,102,0.6);
      border: 1px solid #345D9B;
      .roadItem{
        cursor: pointer;
        padding: 8px;
        box-sizing: border-box;
      }
    }
  }
  
  .queueStyle{
    width: 90px;
    height: 26px;
    font-size: 14px;
    color: #bbe1ff;
    padding: 2px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .queueAction{
    background-color: #007cd6;
    border: 1px solid #007cd6;
  }
  .queueDefault{
    border: 1px solid #345d9b;
  }
}
</style>
